<template>
  <prism-editor class="my-editor height-300" v-model="code" :style="{ height: height + 'px' }" aria-disabled :highlight="highlighter" :readonly="true" line-numbers :tabSize="4"></prism-editor>
</template>

<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";

export default {
  components: {
    PrismEditor,
  },
  props: {
    code: {
      type: String,
      default() {
        return "";
      },
    },
    height: {
      type: Number,
      default() {
        return 450;
      },
    },
  },
  data() {
    return {
      info: {},
    };
  },
  computed: {

  },

  methods: {
    highlighter(code) {
      return highlight(code, languages.js); //returns html
    },
  },
};
</script>

<style lang="scss">
.my-editor {
  background: #2d2d2d;
  color: #ccc;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

.prism-editor__textarea:focus {
  outline: none;
}

/* 非必须 */
.height-300 {
  height: 300px;
}
</style>